<template>
    <div class="home">
    <!--   轮播图     -->
    <div id="slider" class="mui-slider" data-slider="1">
        <div class="mui-slider-group mui-slider-loop" style="transform: translate3d(-1242px, 0px, 0px) translateZ(0px); transition-duration: 0ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);">
            <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="#">
                  <img src="../../images/轮播1.jpg"/></a>
            </div>
            <!-- 第一张 -->
            <div class="mui-slider-item">
                <a href="#">
                    <img src="images/轮播1.jpg">
                </a>
            </div>
            <!-- 第二张 -->
            <div class="mui-slider-item">
                <a href="#">
                    <img src="/images/轮播2.jpg">
                </a>
            </div>
            <!-- 第三张 -->
            <div class="mui-slider-item">
                <a href="#">
                    <img src="images/轮播3.jpg">
                </a>
            </div>
            <!-- 第四张 -->
            <div class="mui-slider-item">
                <a href="#">
                    <img src="images/轮播4.jpg">
                </a>
            </div>
            <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="#">
                    <img src="images/轮播2.jpg">
                </a>
            </div>
        </div>
        <div class="mui-slider-indicator">
            <div class="mui-indicator mui-active"></div>
            <div class="mui-indicator"></div>
            <div class="mui-indicator"></div>
            <div class="mui-indicator"></div>
        </div>
    </div>
    <!--   九宫格表格     -->
    <div class="mui-content">
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <span class="mui-icon mui-icon-home"></span>
                    <div class="mui-media-body">首页</div>
                </a>
            </li>

            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <span class="mui-icon mui-icon-email">
                        <span class="mui-badge" style="font-size: 30px;margin-left: 10px">5</span>
                    </span>
                    <div class="mui-media-body">邮箱</div>
                </a>
            </li>

            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-chatbubble"></span>
                <div class="mui-media-body">联系</div>
            </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-location"></span>
                <div class="mui-media-body">地址</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-search"></span>
                <div class="mui-media-body">搜索</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-phone"></span>
                <div class="mui-media-body">电话</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-gear"></span>
                <div class="mui-media-body">设置</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-info"></span>
                <div class="mui-media-body">关于我们</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-more"></span>
                <div class="mui-media-body">更多</div></a></li>
        </ul>
    </div>
    </div>
</template>
<script>
  // import mui from '../../lib/mui/js/mui.min.js'
export default {
//   mounted() {
//     mui.init({
//       // 启用滑动
//       swipeBack: true
//     });
//   let slider = mui("#slider");
//     // 配置定时轮播滑动
//     slider.slider({
//       interval: 1000
//     });
//   }
}
</script>
<style scoped>
    *{
        margin: 0;
        padding: 0;
        text-decoration: none;

    }

    #slider img{
        width:1080px;
        height: 900px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;

    }
    .mui-bar {
        width: 1080px;
        height: 146px;

    }
    #slider{
        margin-top: 134px;

    }
    .mui-bar.mui-bar-tab span.mui-tab-label {
        font-size: 40px;
        height: 30px;

        padding: 30px 0;
    }
    .mui-tab-item span.mui-icon{
        font-size:80px;
        margin-top: -20px;
        margin-left: -50px;
        color: black;
    }

    .mui-content{
        width: 1080px;
    }
    .mui-table-view-cell{
        /*border: 1px solid red;*/

    }
    .mui-table-view-cell.mui-media span.mui-icon{
        margin: 10px ;
        font-size: 80px;


    }
    .mui-table-view-cell.mui-media div.mui-media-body{
        font-size: 40px;
        padding: 40px 0;

    }
</style>